{layout name="common/basic" /}

 　　　　

<button type="button" rel="drevil" data-content="报名截止时间：'+time+'" data-container="body" data-toggle="popover" data-placement="bottom"></button>


 <script>




$(function () { $("[data-toggle='popover']").popover(); });　　　　


　　  $("[rel=drevil]").popover({
                      trigger:'manual',
                      //placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
                      //天title : '<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;"> Muah ha ha</div>', //this is the top title bar of the popover. add some basic css
                      html: true, //needed to show html of course
                      //content : '<div id="popOverBox"><img src="http://www.hd-report.com/wp-content/uploads/2008/08/mr-evil.jpg" width="251" height="201" /></div>', //this is the content of the html box. add the image here or anything you want really.
                      animation: false
                  }).on("mouseenter", function () {
                      var _this = this;
                      $(this).popover("show");
                      $(this).siblings(".popover").on("mouseleave", function () {
                          $(_this).popover('hide');
                      });
                  }).on("mouseleave", function () {
                      var _this = this;
                      setTimeout(function () {
                          if (!$(".popover:hover").length) {
                              $(_this).popover("hide")
                          }
                      }, 300);
                  });
  </script>
<h3>弹出框实例</h3> <br>
<a href="#" data-user_id="393" class="author">tom</a>

<a href="#" data-user_id="394" class="author">jack</a>

<a href="#" data-user_id="395" class="author">grace</a>


<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>

                <p class="card-text">
                    Some quick example text to build on the card title and make up the bulk of the card's
                    content.
                </p>

                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
            </div>
        </div>

        <div class="card card-primary card-outline">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>

                <p class="card-text">
                    Some quick example text to build on the card title and make up the bulk of the card's
                    content.
                </p>
                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
            </div>
        </div><!-- /.card -->
    </div>
    <!-- /.col-md-6 -->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="m-0">Featured</h5>
            </div>
            <div class="card-body">
                <h6 class="card-title">Special title treatment</h6>

                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>

        <div class="card card-primary card-outline">
            <div class="card-header">
                <h5 class="m-0">Featured</h5>
            </div>
            <div class="card-body">
                <h6 class="card-title">Special title treatment</h6>

                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <!-- /.col-md-6 -->
</div>